<template>
    <div>
    <h1>房号列表</h1>
    <div>
        房型名称:
                    <select v-model="query.typename">
                        <option value="">请选择</option>
                        <option :value="item.typeName" v-for="item in gethouse">{{ item.typeName }}</option>
                    </select>
        <input type="button" value="查询" class="btn btn-success" @click="showw"/>
    </div>
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" v-model="checkAll"  @click="CheckAll"/>
                </td>
                <td>房号ID</td>
                <td>房型名称</td>
                <td>房间号码</td>
                <td>房号描述</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list">
                <td>
                    <input type="checkbox" v-model="checkOne" :value="item.houseNumId" @change="CheckOne"/>
                </td>
                <td>{{item.houseNumId}}</td>
                <td>{{item.typeName}}</td>
                <td>{{item.number}}</td>
                <td>{{item.desc}}</td>
                <td>{{item.state}}</td>
                <td>
                    <input type="button" value="启用" class="btn btn-info" v-if="item.state=='禁用'" @click="updatestate(item.houseNumId,'启用')"/>
                    <input type="button" value="禁用" class="btn btn-success" v-else @click="updatestate(item.houseNumId,'禁用')"/>
                    <input type="button" value="删除" class="btn btn-danger" @click="del(item.houseNumId)"/>
                </td>
            </tr>
        </tbody>
    </table>
    <div>
        <span>当前在第{{ query.pageIndex }}/共{{ data.totalPage }}页</span>
        <span>每页显示{{ query.pageSize }}/共{{ data.totalCount }}条</span>
        <select v-model="query.pageSize" @change="ShowList">
            <option :value="item" v-for="item in arr">每页显示{{ item }}条</option>
        </select>
        <input type="button" value="首页" @click="Gopage(1)"/>
        <input type="button" value="上一页" @click="Gopage(query.pageIndex-1)"/>
        <span v-for="item in data.totalPage" @click="Gopage(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="Gopage(query.pageIndex+1)"/>
        <input type="button" value="尾页" @click="Gopage(data.totalPage)"/>
        <input type="number" v-model="query.pageIndex"/>
        <input type="button" value="跳转" class="btn btn-warning" @click="Gopage(query.pageIndex)"/>
    </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();


onMounted(()=>{
    ShowList();
    showhouse();
})


let gethouse:any=ref([])

let arr=ref([3,5,10,20])

const showhouse=()=>
{
    axios
    ({
        url:'/api/House/GetHouse',
        method:'get'
    })
    .then(res=>{
        console.log(res);
        gethouse.value=res.data;
    })
    .catch(err=>{

    })
}

let query:any=reactive
({
    pageIndex:1,
    pageSize:3,
    typename:''
})
 let data:any=reactive
 ({
    totalCount:'',
    totalPage:'',
    list:[]
 })


 const showw=()=>
 {
    query.pageIndex=1;
    ShowList();
 }
//显示房号信息
const ShowList=()=>
{
    axios
    ({
        url:'/api/House/GetHouseNumber',
        method:'get',
        params:query
    })
    .then(res=>{
        Object.assign(data,res.data);
    })
    .catch(err=>{

    })
}
//分页
const Gopage=(num:any)=>
{
    if(num<1)
    {
        query.pageIndex=1;
        return;
    }
    if(num>data.totalPage)
    {
        query.pageIndex=data.totalPage;
        return;
    }
    query.pageIndex=num;
    ShowList();
}
//修改状态
const updatestate=(id:any,state:any)=>
{
    axios
    ({
        url:'/api/House/NumberUpdateState',
        method:'put',
        params:
        {
            id:id,
            state:state
        }
    })
    .then(res=>{
        if(res.data>0)
        {
            alert("修改成功");
            ShowList();
            return;
        }
        else
        {
            alert("修改失败");
            return;
        }
    })
    .catch(err=>{

    })
}
//删除
const del=(id:any)=>
{
    let f=confirm("确认删除吗?")
    {
        if(f)
        {
            axios
            ({
                url:'/api/House/HouseNumberDelete',
                method:'delete',
                params:
                {
                    id:id
                }
            })
            .then(res=>{
                if(res.data>0)
                {
                    alert("删除成功");
                    ShowList();
                    return;
                }
                else
                {
                    alert("删除失败");
                    return;
                }
            })
            .catch(err=>{

            })
        }
    }
}

let checkAll=ref(false)
let checkOne=ref([])

const CheckAll=()=>
{
    checkAll.value=!checkAll.value;
    if(checkAll.value==true)
    {
        checkOne.value=data.list.map((item:any)=>{
            return item.houseNumId;
        })
    }
    else
    {
        checkOne.value=[];
    }
}

const CheckOne=()=>
{
    if(checkOne.value.length==data.list.length)
    {
        checkAll.value=true;
    }
    else
    {
        checkAll.value=false;
    }
}




</script>

<style scoped>
span
{
    margin: 0 10px;
}
input
{
    margin: 0 10px;
}
</style>